<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">
      <!-- <A-A :fValue="FFvalue"></A-A> -->
      <B-B :fValue="FFvalue"></B-B>
    </div>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script>
      // 1。从Vue实例拿数据
      //   Vue.component('AA', {
      //     props: ['fValue'],
      //     data: function () {
      //       return {
      //         AAvalue: '这是AA',
      //       }
      //     },
      //     template: `
      // <div>
      //  <div>{{AAvalue}}</div>
      //  <div>这是拿来的数据{{fValue}}</div>
      // </div>
      // `,
      //   })

      Vue.component('BB', {
        props: ['fValue'],
        data: function () {
          return {
            BBvalue: '这是AA',
          }
        },
        template: `
      <div>
      <div>我是BB</div>
       <div> <C-C :bValue='BBvalue'></C-C></div>
       <div></div>
      </div>
      `,
      })

      Vue.component('CC', {
        props: ['bValue'],
        data: function () {
          return {
            CCvalue: '这是CC',
          }
        },
        template: `
      <div>
       <div>这是CC拿来的数据{{bValue}}</div>
       <div></div>
      </div>
      `,
      })

      new Vue({
        el: '.box',
        data: {
          FFvalue: '这是父级数据',
        },
        methods: {},
      })
    </script>
  </body>
</html>
